<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-18 10:21:45
 * @LastEditors: Kevin Zhao
 * @LastEditTime: 2023-05-10 20:53:15
 * @Description: 我的
 * @FilePath: \tuanfeng-mini\src\pages\mine.vue
-->
<template>
    <div class="container">
        <div class="header">
            <div class="user">
                <u-avatar class="avatar" :src="avatar" :size="110" @click="log"></u-avatar>
                <div class="name" @click="log">{{ nickname || "未登录" }}</div>
            </div>
            <!-- <div v-if="nickname === ''">
                <button style="background-color: #0c92ff; font-size: 18px; font-weight: bold; color: #FFF; margin-left: -15px; border: none;" plain="true" open-type="getPhoneNumber" class="login_button" @getphonenumber="login">登录</button>
            </div> -->
        </div>
        <div class="list">
            <div class="item" @click="toPage('pages/collection')">
                <div class="left">
                    <!-- <u-icon style="margin-right: 8px; margin-top: 2px" :size="40" name="star"></u-icon> -->
                    <img src="../assets/img/myCollection.png" alt="" style="width: 20px; height: 20px;" />
                    <div class="label">我的收藏</div>
                </div>
                <div class="right">
                    <div class="arrow">
                        <u-icon name="arrow-right"></u-icon>
                    </div>
                </div>
            </div>
            <div class="item" @click="toPage('pages/browsing_history')">
                <div class="left">
                    <!-- <u-icon style="margin-right: 8px; margin-top: 3px" :size="40" name="eye"></u-icon> -->
                    <img src="../assets/img/myHistory.png" alt="" style="width: 20px; height: 20px;" />
                    <div class="label">浏览记录</div>
                </div>
                <div class="right">
                    <div class="arrow">
                        <u-icon name="arrow-right"></u-icon>
                    </div>
                </div>
            </div>
            <div class="item" @click="toPage('pages/mime/myItem')">
                <div class="left">
                    <!-- <u-icon style="margin-right: 8px; margin-top: 3px" :size="40" name="eye"></u-icon> -->
                    <img src="../assets/img/myItem.png" alt="" style="width: 20px; height: 20px;" />
                    <div class="label">我的事项</div>
                </div>
                <div class="right">
                    <div class="arrow">
                        <u-icon name="arrow-right"></u-icon>
                    </div>
                </div>
            </div>
            <div class="item" @click="toPage('pages/mime/myAgency')">
                <div class="left">
                    <!-- <u-icon style="margin-right: 8px; margin-top: 3px" :size="40" name="eye"></u-icon> -->
                    <img src="../assets/img/myAgency.png" alt="" style="width: 20px; height: 20px;" />
                    <div class="label">我的办件</div>
                </div>
                <div class="right">
                    <div class="arrow">
                        <u-icon name="arrow-right"></u-icon>
                    </div>
                </div>
            </div>
            <!-- <div class="item">
                <div class="left">
                    <img src="../assets/img/history.png" alt="" />
                    <button style="background-color: #fff; font-size: 17px; margin-left: -15px; border:none;" plain="true" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权</button>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import { getUserInfoAPI } from "../api/user.js";
import { mapState, mapMutations, mapActions } from "vuex";

export default {
    computed: {
        ...mapState(["avatar", "nickname", "openId"]),
    },
    onShareAppMessage() {},
    methods: {
        ...mapMutations(["setData"]),
        ...mapActions(["getUserProfile", "getOpenId"]),
        log() {
            if (!this.nickname) {
                this.getOpenId()
                    .then((res) => {
                        return getUserInfoAPI({ openId: this.openId });
                    })
                    .then((res) => {
                        let { avatar, nickName } = res.data;
                        this.setData({ key: 'avatar', value: avatar });
                        this.setData({ key: 'nickname', value: nickName });
                        wx.setStorageSync('avatar', avatar);
                        wx.setStorageSync('nickname', nickName);
                    });
            } else {
                this.$u.route({
                    url: 'pages/user_info'
                })
            }
        },
        toPage(path) {
            if (!this.nickname) {
                wx.showToast({
                    title: "请先登录",
                    icon: "none",
                });
                return false;
            }
            this.$u.route({
                url: path,
            });
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    min-height: 100vh;
    background-color: #efefef;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
        width: 100%;
        height: 150px;
        background-color: #0c92ff;
        padding: 20px;
        display: flex;
        align-items: flex-end;
        margin-bottom: 15px;
        box-sizing: border-box;
        .user {
            display: flex;
            align-items: center;
            .avatar {
                margin-right: 15px;
            }
            .name {
                font-size: 18px;
                font-weight: bold;
                color: #fff;
            }
        }
    }
    .list {
        width: 92vw;
        background-color: #fff;
        border-radius: 6px;
        .item {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #fafafa;
            &:last-child {
                border: none;
            }
            .left {
                height: 20px;
                display: flex;
                align-items: center;
                font-size: 17px;
                img {
                    width: 25px;
                    height: 25px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
